<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
    <title>Remote Control</title>    
    <script type="text/javascript" src="/js/prototype.js"></script>
    <script type="text/javascript" src="/js/scriptaculous/slider.js"></script>  
    <link rel="stylesheet" type="text/css" href="/css/reset.css" media="screen"></link>
    <link rel="stylesheet" type="text/css" href="/css/text.css" media="screen"></link>
    <link rel="stylesheet" type="text/css" href="/css/960.css" media="screen"></link>
    <link rel="stylesheet" type="text/css" href="/css/style.css" media="screen"></link>
    <script type="text/javascript">
        Event.observe(window,  "load", init);
        var slider;
        var info;
        var slideTimeout;
        function init() {
            refreshDirList();
            slider = new Control.Slider('handle1', 'track1', {
                range: $R(0,100),
                
				onSlide: function(v) {
				    clearTimeout(slideTimeout);
				    slideTimeout = setTimeout( "command('seekto', 'pos%3D' + " + parseInt(v) + ");", 1000 );
				 },
				onChange: function(v) {  }
			});
			//slider.setDisabled();
            setTimeout("refreshInfo()", 200);
        }

        function refreshDirList() {
            $("dirs").update("loading...");
            new Ajax.Request("/proxy.php?path=%3Faction%3Dlistdirs", {
                method: "GET",
                onSuccess: function(t) {
                 var list = t.responseText.evalJSON();
                 var listHTML = "<ul>";
                 list.each(function(f) { 
                    listHTML += "<li><a href='#' onclick=\"loadFiles('" + f.path + "')\">" + f.name +"</a></li>";
                 });
                 listHTML += "</ul>";
                 $("dirs").update(listHTML);
                },
                onFailure: function(t) {alert("OOPS");}
            });
        }
        function loadFiles(path) {
            $("files").update("loading...");
            //this is kind of shitty.  Cherrypy isn't handling spaces in paths so I'm substituting here, then replacing it in the server
            new Ajax.Request("/proxy.php?path=%3Faction%3Dlistfiles%26path%3D" + path.replace(/ /g, "-_space_-"), {
                method: "GET",
                onSuccess: function(t) {
                 var list = t.responseText.evalJSON();
                 var listHTML = "<ul>";
                 list.each(function(f) { 
                    listHTML += "<li><a href='#' onclick=\"loadmovie('" + f.path.replace(/%20| /g, "-_space_-") + "')\">" + f.name +"</a></li>";
                 });
                 listHTML += "</ul>";
                 $("files").update(listHTML);
                },
                onFailure: function(t) {alert("OOPS");}
            });
        }
        function refreshInfo() {
            new Ajax.Request("/proxy.php?path=%3Faction%3Dinfo", {
                method:"GET",
                onSuccess: function (t) {
                    info = t.responseText.evalJSON();
                    slider.setValue(info.percent);
                    $("now_playing").update(info.file);
                    $("timer").update(parseInt(info.pos) + "/" + parseInt( info.len) );
                    setTimeout("refreshInfo()", 15000);
                }
            });
            
        }
        

        function channel(n) {
            command("channel",  "channel%3D" + n);
        }
        
        function loaddir(path) {
            command("listfiles","path%3D" + path.replace(/ /g, "-_space_-"));
        }        
        function loadmovie(path) {
            //reset slider
            command("load", "file%3D" + path.replace(/ /g, "-_space_-"));
        }
        function seek(diff) {
           command("seek", "diff%3D" + diff);        
        }

        function command(cmd, params) {
            new Ajax.Request("/proxy.php?path=%3Faction%3D" + cmd + "%26" + params, {
                method: "GET",
                onSuccess: function(t) {
 
                },
                onFailure: function(t) {alert("OOPS");}
            });        
        }
        
    </script>
  </head>
    <body class="container_12">
        <div id="header_container" class="grid_12">
            <h1>Video Robot</h1>
        </div>
        <div id="control_container" class="grid_8">
            <h2 id="now_playing">No video playing</h2>
            <a href="#" onclick="seek(-300)">-5m</a>&nbsp;
            <a href="#" onclick="seek(-30)">-30s</a>&nbsp;
            <a href="#" onclick="command('pause')">play/pause</a>&nbsp;
            <a href="#" onclick="command('exit')">stop</a>&nbsp;
            <a href="#" onclick="seek(30)">30s</a>&nbsp;            
            <a href="#" onclick="seek(300)">+5m</a>
		    <div id="track1" style="width:600px; background-color:#ccc; height:10px;">
			    <div id="handle1" style="width:10px; height:15px; background-color:#111; cursor:move;"></div>
		    </div>
		<div style="padding-top:20px;" id="timer">&nbsp;</div>
            
        </div>
        <div id="list_container" class="grid_4">
            <h3>Directories</h3>
            <div id="dirs">
            </div>
            <h3>Videos</h3>
            <div id="files">
            </div>
            </div>
        </div>
    </body>
</html>
